<template>
  <div>
    <el-card>
      <div style="margin-bottom: 10px;">
        <el-button type="primary" @click="showDialog()">新增</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column v-for="item in columns" :key="item.prop" :label="item.label" :prop="item.prop"
          :width="item.width">
          <template slot-scope="{ row }">
            <template v-if="item.prop === 'status'">
              {{ row[item.prop] === 1 ? '正常' : '停用' }}
            </template>
            <template v-else>
              <span :class="{ 'text-blue': item.prop === 'dictType' }" @click="clickCell(row, item.prop)">{{
                row[item.prop]
              }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="action" width="200">
          <template slot-scope="{ row }">
            <el-button type="text" @click="showDialog(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <DialogForm 
      :visible="visible"
      :title="title"
      :form-list="formList"
      :formData="formData" 
      :onSubmit="onSubmit"
      @cancel="handleClose"
      @ok="handleOk"
    />
  </div>
</template>

<script>
import DialogForm from './DialogForm.vue';
import {
  getDictDataList,
  addDictData,
  updateDictData,
} from "@/api/dict.js";

export default {
  props: {
    dictType: {
      type: String,
      default: ''
    },
  },
  components: {
    DialogForm
  },
  data() {
    return {
      columns: [
        {
          label: "字典标签",
          prop: "dictLabel",
        },
        {
          label: "字典键值",
          prop: "dictValue",
        },
        {
          label: "字典排序",
          prop: "dictSort",
        },
        {
          label: "状态",
          prop: "status",
        },
        {
          label: "备注",
          prop: "remark",
        },
      ],
      tableData: [],
      // 弹窗
      visible: false,
      title: "",
      // 表单
      formList: [
        {
          label: "字典标签",
          valueType: "input",
          key: "dictLabel",
          itemSpan: 24,
          rules: [{ required: true, message: "请输入名称", trigger: "blur" }]
        },
        {
          label: "字典键值",
          valueType: "input",
          key: "dictValue",
          itemSpan: 24,
          rules: [{ required: true, message: "请输入字典类型", trigger: "blur" }]
        },
        {
          label: "字典排序",
          valueType: "input-number",
          key: "dictSort",
          itemSpan: 24,
          rules: [{ required: true, message: "请输入字典排序", trigger: "change" }]
        },
        {
          label: "状态",
          valueType: "select",
          key: "status",
          options: [
            { label: "正常", value: 1 },
            { label: "停用", value: 0 },
          ],
          itemSpan: 24,
          rules: [{ required: true, message: "请选择状态", trigger: "change" }]
        },
        {
          label: "备注",
          valueType: "input",
          key: "remark",
          span: 24,
        },
      ],
      formData: {},
    };
  },
  created() {
    this.getTableData()
  },
  methods: {
    getTableData() {
      const { dictType } = this
      getDictDataList({ dictType }).then(res => {
        this.tableData = res.data.list
      })
    },
    showDialog(row) {
      if (!row) {
        this.title = "添加";
      } else {
        this.title = "编辑";
        this.formData = { ...row }
      }
      this.visible = true;
    },
    async onSubmit(params) {
      const { dictType } = this
      const func = this.title === '添加' ? addDictData : updateDictData
      return func({
        ...params,
        dictType
      })
    },
    handleOk() {
      this.handleClose();
      this.getTableData();
    },
    // 弹窗关闭事件
    handleClose() {
      this.visible = false;
    },
  }
};
</script>

<style lang="scss" scoped></style>
